<template>
	<view>
		<nav-bars title="企业认证"></nav-bars>
		<view class="personal">
			<view class="personal_title">请提交企业认证资料</view>
			<view style="margin-bottom: 80rpx;">
				<view class="personal_nav">请上传第二代身份证</view>
				<view class="personal_icon">
					<u-icon label="此身份证件照必须是公司法人" label-size="26" label-color="#C3AB7C" name="error-circle" color="#C3AB7C" size="26"></u-icon>
				</view>
				<view class="personal_upload">
					<view class="personal_View" @click="GetPicture(1)">
						<image :src="imagejust ? imagejust.url : justImg"></image>
						<view class="LookView" v-if="imagejust">
							<view class="LookItem">
								<view class="LookEye" @click.stop="PreviewItemImg(imagejust)"><u-icon name="eye" color="#fff" size="50"></u-icon></view>
								<view @click.stop="DeleteItemImg(1)"><u-icon name="trash" color="#fff" size="50"></u-icon></view>
							</view>
						</view>
					</view>
					<view class="personal_View" @click="GetPicture(2)">
						<image :src="imageback ? imageback.url : backImg"></image>
						<view class="LookView" v-if="imageback">
							<view class="LookItem">
								<view class="LookEye" @click.stop="PreviewItemImg(imageback)"><u-icon name="eye" color="#fff" size="50"></u-icon></view>
								<view @click.stop="DeleteItemImg(2)"><u-icon name="trash" color="#fff" size="50"></u-icon></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="margin-bottom: 80rpx;">
				<view class="personal_nav">请上传企业营业执照</view>
				<view class="personal_icon">
					<u-icon label="该证件信息仅用于通联实名认证" label-size="26" label-color="#C3AB7C" name="error-circle" color="#C3AB7C" size="26"></u-icon>
				</view>
				<view class="personal_upload">
					<view class="personal_View" @click="GetPicture(3)">
						<image :src="imagebusiness ? imagebusiness.url : businessImg"></image>
						<view class="LookView" v-if="imagebusiness">
							<view class="LookItem">
								<view class="LookEye" @click.stop="PreviewItemImg(imagebusiness)"><u-icon name="eye" color="#fff" size="50"></u-icon></view>
								<view @click.stop="DeleteItemImg(3)"><u-icon name="trash" color="#fff" size="50"></u-icon></view>
							</view>
						</view>
					</view>
					<view class="personal_View"></view>
				</view>
			</view>
			<view style="margin-bottom: 80rpx;">
				<view class="personal_nav">
					请上传开户证明
					<text style="color: #737373;">（可选）</text>
				</view>
				<view class="personal_icon">
					<u-icon label="该证件信息仅用于通联实名认证" label-size="26" label-color="#C3AB7C" name="error-circle" color="#C3AB7C" size="26"></u-icon>
				</view>
				<view class="personal_upload">
					<view class="personal_View" @click="GetPicture(4)">
						<image :src="imageaccount ? imageaccount.url : accountImg"></image>
						<view class="LookView" v-if="imageaccount">
							<view class="LookItem">
								<view class="LookEye" @click.stop="PreviewItemImg(imageaccount)"><u-icon name="eye" color="#fff" size="50"></u-icon></view>
								<view @click.stop="DeleteItemImg(4)"><u-icon name="trash" color="#fff" size="50"></u-icon></view>
							</view>
						</view>
					</view>
					<view class="personal_View"></view>
				</view>
			</view>
			<view style="margin-top: 40rpx;"><view class="personal_btnTwo" @click="GoNext">下一步</view></view>
		</view>
	</view>
</template>
<script>
import URL from '@/config/url.js';
import Https from '@/service/verification.js';
export default {
	data() {
		return {
			justImg: 'https://dev-liankun-1305433883.cos.ap-guangzhou.myqcloud.com/liankun/static/verification/just.png', //默认的身份证正面
			backImg: 'https://dev-liankun-1305433883.cos.ap-guangzhou.myqcloud.com/liankun/static/verification/back.png', //默认的身份证反面
			businessImg: 'https://dev-liankun-1305433883.cos.ap-guangzhou.myqcloud.com/liankun/static/verification/business.png', //默认的营业执照
			accountImg: 'https://dev-liankun-1305433883.cos.ap-guangzhou.myqcloud.com/liankun/static/verification/account.png', //默认的开户证明

			imagejust: null, //上传身份证正面
			imageback: null, //上传身份证反面
			justBoole: false,
			backBoole: false,
			imagebusiness: null, //上传的营业执照
			imageaccount: null, //上传的开户证明
			//身份证信息
			BankCard: {
				Name: '', //姓名（人像面）1
				Sex: '', //性别（人像面）
				Nation: '', //民族（人像面）
				Birth: '', //出生日期（人像面）
				Address: '', //地址（人像面）
				IdNum: '', //身份证号（人像面）1
				Authority: '', //发证机关（国徽面）
				ValidDate: '', //证件有效期（国徽面）1
				AdvancedInfo: '', //证件有效期（国徽面）1
				startTime: '',
				endTime: '',
				imageList: {
					imagejust: null,
					imageback: null,
					imagebusiness: null,
					imageaccount: null
				}
			},
			// 营业执照信息
			businessMes: {}
		};
	},
	mounted() {},
	methods: {
		GoNext() {
			var that = this;
			var just = that.imagejust;
			var back = that.imageback;
			var business = that.imagebusiness;
			// var account = that.imageaccount;
			if (just != null && back != null && business != null && that.justBoole == true && that.backBoole == true) {
				// console.log(123);
				uni.setStorageSync('Enterprise', { BankCard: that.BankCard, businessMes: that.businessMes });
				uni.navigateTo({
					url: '/pages_Verification/verification/enterprise/information?authType=2'
				});
			}
			if(that.justBoole==false){
				uni.showToast({
					title: '请上传正确的身份证正面',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			if(that.backBoole==false){
				uni.showToast({
					title: '请上传正确的身份证反面',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			if (just == null) {
				uni.showToast({
					title: '请上传身份证正面',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			if (back == null) {
				uni.showToast({
					title: '请上传身份证反面',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			if (business == null) {
				uni.showToast({
					title: '请上传营业执照',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			if(that.justBoole==false){
				uni.showToast({
					title: '请上传正确的身份证正面',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			if(that.backBoole==false){
				uni.showToast({
					title: '请上传正确的身份证反面',
					icon: 'none',
					duration: 2000
				});
				return;
			}
		},
		PreviewItemImg(MES) {
			let img_url = [];
			img_url.push(MES.url);
			uni.previewImage({
				urls: img_url,
				current: 0,
				longPressActions: {
					success: function(data) {
						console.log(data);
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				}
			});
		},
		DeleteItemImg(num) {
			var that = this;
			switch (num) {
				case 1:
					that.imagejust = null;
					that.BankCard.imageList.imagejust = null;
					break;
				case 2:
					that.imageback = null;
					that.BankCard.imageList.imageback = null;
					break;
				case 3:
					that.imagebusiness = null;
					that.BankCard.imageList.imagebusiness = null
					break;
				case 4:
					that.imageaccount = null;
					that.BankCard.imageaccount = null
					break;
			}
		},
		getIDCardOCR(id, text) {
			var that = this;
			let params = {
				img_id: id,
				card_side: text == '正' ? 'FRONT' : 'BACK'
			};
			Https.GetBankCardOCR(params).then(res => {
				if (res.code == 1) {
					console.log(res.data);
					var data = res.data;
					if (text == '正') {
						if (data.Name != '') {
							that.BankCard.Name = data.Name;
							that.BankCard.Sex = data.Sex;
							that.BankCard.Nation = data.Nation;
							that.BankCard.Birth = data.Birth;
							that.BankCard.Address = data.Address;
							that.BankCard.IdNum = data.IdNum;
							that.justBoole = true;
							uni.showToast({
								title: '上传成功',
								icon: 'success'
							});
							setTimeout(function() {
								uni.hideLoading();
							}, 500);
						} else {
							uni.hideLoading();
							uni.showModal({
								title: '提示',
								content: '请上传对应身份证正面照',
								showCancel: false,
								success(res) {
									if (res.confirm) {
									}
								}
							});
						}
					} else {
						if (data.ValidDate != '') {
							var start = data.ValidDate.split('-')[0];
							var end = data.ValidDate.split('-')[1];
							that.BankCard.ValidDate = data.ValidDate;
							that.BankCard.startTime = start.replace(/\./g, '-');
							that.BankCard.endTime = end.replace(/\./g, '-');
							that.backBoole = true;
							uni.showToast({
								title: '上传成功',
								icon: 'success'
							});
							setTimeout(function() {
								uni.hideLoading();
							}, 500);
						} else {
							uni.hideLoading();
							uni.showModal({
								title: '提示',
								content: '请上传对应身份证反面照',
								showCancel: false,
								success(res) {
									if (res.confirm) {
									}
								}
							});
						}
					}
					// console.log(that.BankCard);
				} else {
					if (text == '正') {
						// that.imagejust = null;
						uni.showToast({
							title: '请上传正确的正面照!',
							icon: 'none',
							duration: 2500
						});
						return;
					}
					if (text == '反') {
						// that.imageback = null;
						uni.showToast({
							title: '请上传正确的反面照!',
							icon: 'none',
							duration: 2500
						});
						return;
					}
				}
			});
		},
		GetBusinessMes(id) {
			var that = this;
			let params = {
				img_id: id
			};
			Https.GetbizLicenseOCR(params).then(res => {
				if (res.code == 1) {
					console.log(res.data);
					var data = res.data;
					that.businessMes = data;
					uni.showToast({
						title: '上传成功',
						icon: 'success'
					});
					setTimeout(function() {
						uni.hideLoading();
					}, 500);
				} else {
					uni.hideLoading();
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			});
		},
		GetPicture(num) {
			var that = this;
			uni.chooseImage({
				count: 1,
				success: res => {
					const tempFilePaths = res.tempFilePaths;
					uni.uploadFile({
						url: URL.ENTER_UPLOAD_IMAGE,
						filePath: tempFilePaths[0],
						name: 'file',
						success: uploadFileRes => {
							uni.showLoading({
								title: '上传中'
							});
							// console.log(uploadFileRes.data);
							let data = JSON.parse(uploadFileRes.data);
							if (data.code == 1) {
								console.log(data);
								switch (num) {
									case 1:
										that.imagejust = data.data;
										that.BankCard.imageList.imagejust = data.data;
										that.getIDCardOCR(data.data.id, '正');
										break;
									case 2:
										that.imageback = data.data;
										that.BankCard.imageList.imageback = data.data;
										that.getIDCardOCR(data.data.id, '反');
										break;
									case 3:
										that.imagebusiness = data.data;
										that.BankCard.imageList.imagebusiness = data.data;
										that.GetBusinessMes(data.data.id);
										break;
									case 4:
										that.imageaccount = data.data;
										that.BankCard.imageaccount = data.data;
										setTimeout(function() {
											uni.hideLoading();
										}, 500);
										break;
								}
								// console.log(that);
								// if (num == 0) {
								// 	that.imagejust = data.data;
								// } else {
								// 	that.imageback = data.data;
								// }
								// uni.showToast({
								// 	title: '上传成功',
								// 	icon: 'success'
								// });
								// setTimeout(function() {
								// 	uni.hideLoading();
								// }, 500);
							} else {
								uni.showToast({
									title: data.msg,
									icon: 'none'
								});
							}
						}
					});
				}
			});
		}
	}
};
</script>
<style lang="less">
page {
	background: #fff;
}
.personal {
	padding: 32rpx;
	.personal_title {
		font-size: 60rpx;
		font-weight: 500;
		color: #212121;
		margin-bottom: 79rpx;
	}
	.personal_nav {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
	}
	.personal_icon {
		padding-top: 6rpx;
		padding-bottom: 22rpx;
	}
	.personal_upload {
		display: flex;
		align-items: center;
		justify-content: space-around;
		.personal_View {
			width: 310rpx;
			height: 230rpx;
			overflow: hidden;
			border-radius: 12rpx;
			position: relative;
			.LookView {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				display: flex;
				align-items: center;
				width: 310rpx;
				height: 230rpx;
				background: rgba(0, 0, 0, 0.3);
				.LookItem {
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 0 auto;
					.LookEye {
						margin-right: 20rpx;
					}
				}
			}
		}
	}
	.personal_btnOne {
		height: 90rpx;
		border: 2rpx solid #c3ab7c;
		border-radius: 10rpx;
		margin-top: 45%;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
		font-weight: 500;
		color: #c3ab7c;
	}
	.personal_btnTwo {
		height: 90rpx;
		background: #c3ab7c;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
		font-weight: 500;
		color: #ffffff;
	}
}
</style>
